import React, { memo } from 'react';
import { Avatar } from 'antd';
import { WebAudio } from '@/molecules';
import Pre from '@/components/Pre';
import moment from 'moment';
import styles from './index.less';

const getParse = (s1, e1, s2, e2) => {
    if (e2 <= e1) {
        return `${parseInt((s2 - s1) / 1000, 10)},${parseInt((e2 - s1) / 1000, 10)}`;
    }
    if (e2 > e1) {
        if (s2 <= e1) {
            return `${parseInt((s2 - s1) / 1000, 10)},${parseInt((e1 - s1) / 1000, 10)}`;
        }
    }
    return `${parseInt(s1 / 1000, 10)},${parseInt((e1 - s1) / 1000, 10)}`;
};

const getTime = time => moment(time).format('YYYY-MM-DD HH:MM');

const QuestionList = memo(({ data = {}, ...rest }) => {
    const { interviewArrangeVO = {}, questionData = {} } = data;
    const { recordTimeInfo = {}, recordUrl = '' } = interviewArrangeVO;
    const { answer = {}, comments = [] } = questionData;
    const { answerTimes = [] } = answer;
    return (
        <div {...rest}>
            <div className={styles.questionItem}>
                <div className={styles.speak}>
                    员工答复：
                    <span className={styles.answers}>
                        <Pre>{answer?.answerContent}</Pre>
                    </span>
                </div>
                {answerTimes?.length > 0 && <>
                    <div>答复录音：</div>
                    {
                        answerTimes.map(item => (
                            <WebAudio
                                src={`${recordUrl}#t=${getParse(
                                    recordTimeInfo?.startTime,
                                    recordTimeInfo?.endTime,
                                    item?.startTime,
                                    item?.endTime
                                )}`}
                                controls="controls"
                                style={{ height: '30px', margin: '15px 0' }}
                            />
                        ))
                    }
                </>}
            </div>
            <div className={styles.questionEvaluate}>
                <div className={styles.evaluate}>面谈评价：</div>
                {comments.map(item => (
                    <div className={styles.commentItem} key={item.id}>
                        <div>
                            <Avatar icon="user" src={item?.createUserInfo?.avatar} size={24} style={{ flex: '0 0 80px' }} />
                        </div>
                        <div className={styles.commentItemRight}>
                            <div className={styles.nameWrap}>
                                <span className={styles.name}>{item?.createUserInfo?.employeeName}</span>
                                <span className={styles.time}>{getTime(item?.updateTime || item?.createTime)}</span>
                            </div>
                            <div className={styles.cont}>
                                <Pre>{item?.commentContent}</Pre>
                            </div>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
});

export default QuestionList;
